<template>
  <!-- {{ selectedList }} -->
  <div :key="setUid" class="tagTreeFormItem" @click="emit('clickInput')">
    <div class="tagWrap">
      <el-tag
        size="small"
        v-for="(item, index) in selectedList"
        :key="index"
        v-bind="{ ...bindConfig }"
      >
        <span class="tagTest">
          <!-- {{ tagFormatter(item) }} -->
          <!-- {{ item }} -->
          <!-- {{ tagShowList }} -->
          {{ item.name }}
        </span>
      </el-tag>
    </div>
    <el-icon class="rightIcon"><ArrowRight /></el-icon>
  </div>
</template>
<script setup>
import { setUid } from '@/utils';
const props = defineProps({
  bindConfig: {
    type: Object,
    default: () => {},
  },
  collapseTags: {
    // 最多展示多少个
    type: Number,
    default: 0,
  },
  selectedList: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(['clickInput']);
const init = () => {};

// const tagShowList = computed(() => {
//   if (!props.collapseTags || props.selectedList.value?.length <= props.collapseTags) {
//     return props.selectedList.value;
//   } else {
//     let diff = props.selectedList.value?.length - props.collapseTags;
//     let arr = props.selectedList.value.slice(0, props.collapseTags);
//     arr.push({
//       name: '+' + diff,
//       noClose: true,
//     });
//     return arr;
//   }
// });
</script>
<style lang="scss" scoped>
.tagTreeFormItem {
  position: relative;
  min-height: 30px;
  max-height: 80px;
  line-height: 26px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border: solid 1px rgb(220, 223, 230);
  border-radius: 4px;
  cursor: text;
  overflow: auto;
  .el-tag {
    margin: 0 2px;
  }
  .el-icon-circle-close {
    margin: 10px 10px 0 0;
    &:hover {
      color: var(--el-color-primary);
      cursor: pointer;
    }
  }
  .tagWrap {
    padding-right: 15px;
  }
}
.rightIcon {
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -7px;
  cursor: pointer;
  &:hover {
    color: var(--el-color-primary);
  }
}
</style>
